<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>智慧写作平台</title>
					<link href="/pad/resources/css/bootstrap.min.css" rel="stylesheet">
		<link href="/pad/resources/css/style.css" rel="stylesheet">
	
	<script src="/pad/resources/js/jquery.min.js"></script>
	<script src="/pad/resources/js/jquery.form.min.js"></script>
	<script src="/pad/resources/js/bootstrap.min.js"></script>
	<script src="/pad/resources/js/star-rating.min.js"></script>
	</head>
	
	<body>
		</div>

		<nav class="navbar navbar-blue navbar-fixed-top" role="navigation">
			<div class="container bs-docs-container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
						<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<h1>智慧写作平台</h1>
				</div>
				<ul class="nav navbar-nav">
					<li class="active"><a href="#" onclick="ret()">返回</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li class="dropdown"><a id="user" href="#" class="dropdown-toggle" data-toggle="dropdown">用户 <span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="/pad/logout">退出登录</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</nav>



		<div class="container">
			<div class="row" >

				<div class="col-sm-6">
				
						<div class="panel panel-info">
							<div class="panel-heading">
								<h3 class="panel-title">文本内容</h3>
							</div>
						
							<div class="panel-body" id='textContent'>
							
								<div id='jiazai2'>加载中.........</div>
							</div>
						
						</div>
					
				</div>


				<div class="col-sm-6">
				
						<div class="panel panel-success">
							<div class="panel-heading">
								
									 <ul class="nav nav-pills ">
									        <li id='tp' class='active'><a href="#" onclick="textReport()">写作文本分析功能</a></li>
									        <li id='pa'><a href="#" onclick="petextAye()">个人文本分析反馈</a></li>
									        <li id='ga'><a href="#" onclick="gptextAye()">小组文本比较分析反馈</a></li>
									 </ul>
								    
								
							</div>
							
							<div class="panel-body" >
<div id='ctBegin'>
	
	
							<div id='jiazai'>加载中.........</div>
					<div class="echarts" id="ptextAye" style="width:550px;height:500px;"></div>
  <ul id="ulc" class="list-group" style="display:none"> <!--   -->
  	<li class="list-group-item list-group-item-warning"></li>
    <li class="list-group-item list-group-item-warning"></li>
    <li class="list-group-item list-group-item-warning"></li>
    <li class="list-group-item list-group-item-warning"></li>
    <li class="list-group-item list-group-item-warning"></li>
     </ul>
   <table>
   <tr>
   	<td>
   </tr>
   </table>
   
   <h3><span id="fontCount"></span></h3>
   <br/>
  <div id="result"></div>
							</div>
</div>

<div id='ctPa' style="display: none">
      
</div>

<div id='ctGa' style="display:none">
  <div class="echarts" id="gtextAye" style="width:550px;height:500px;"></div>
   <span id="fontCountGp">
</div>


	
							
							<!-- add -->
						</div>
				
				</div>

			</div>
		</div>

		<!--  <div class="jumbotron text-center" style="margin-bottom:0">
	  <p>到底了</p>
	</div>  -->
	
		 <div id="cprtFooter">
	        <!-- 版权信息 -->
	 </div>	

<script type="text/javascript">
		$("#cprtFooter").load("copyrightFooter.html");
</script>
	
	
	<script src="./resources/js/echarts/echarts.min.js"></script>
	<script>
	
	
	var padId=""
	var me
	var fbkData
	function stringbuilder()
	{
	　　this.arr = new Array();
	　　this.append=function(str)
	　　{
	　　　　this.arr.push(str);
	　　}
	　　this.tostring = function()
	　　{
	　　　　return this.arr.join('');
	　　}
	}
	
	$.ajax({//填充 用户退出登陆上边的用户名
		async:false,
		url : '/pad/getSessionUser',
		success : function(user) {
			me=user;
			$("#user").html(user.realname);
		   }
		});
	//获得padid ，以便获取pad的文本内容   本函数打开页面自动进行
	
			$.ajax({
				async:false,
				url : '/pad/assignment/getAssignmentPadCurrentId?assignmentId='+ getQueryString('assignmentId'),
				success : function(data) {
					padId=data.id
			    }
			});
	
			$.ajax({
				   async: false,	
				   url: "./resources/json/textFeedback.json",//json文件位置
				   type: "GET",//请求方式为get
				   dataType: "json", //返回数据格式为json
				   success: function(data) {//请求成功完成后要执行的方法 
					   fbkData=data
				   }});
	
	//页面初始化，形成报告 // 传入 padId，获得文本内容
		$.ajax({
			        async:false,
					url : '/pad/analysis/getTextAysContents?padId='+padId+'&activityId='+getQueryString('activityId'),
					success : function(data) {
						    var wordMap=data.dictRes.coloreMapWord
						    var colorMap=data.dictRes.coloreMap
						    var count = new Array()
						    var percent = new Array()
						    var everyWords=''
						    var cutwords=''
						    for (var uName in data.userText){
						    	if (uName==me.realname){
						    		everyWords=data.userText[uName]
						    	}
						    }
						    for (var i=0;i<data.cutTexts.length;i++){
						    	var temp=data.cutTexts[i]
						    	 for (var uName in temp){
								    	if (uName==me.realname){
								    		cutwords=temp[uName]
								    	}
								    }
						    }
						  for(var i=0;i<5;i++){
											count[i] = 0
										}
									
								    document.getElementById("jiazai").style.display="none"
								    document.getElementById("jiazai2").style.display="none"
								    
								    for (var i=0;i<cutwords.length;i++){
								     if(wordMap[cutwords[i]]==null){
								    	 //分词不在字典里，填充为黑色
								    	  $("#textContent").append('<span style="color:#000000">'+cutwords[i]+'</span>');  
								     }else{
								    	 $("#textContent").append('<span style="color:'+wordMap[cutwords[i]]+'">'+cutwords[i]+'</span>');  
								     }
								    	 
								  
								    
								   	 if(wordMap[cutwords[i]]=='#FF0000'){
								   		 //类别 1 funt  结果
								   		 count[0]=count[0]+1
								   	 }else if((wordMap[cutwords[i]]=='#0000FF')){
								   		 //类别 125 affect 情感
								   		count[1]=count[1]+1
								   	 }else if((wordMap[cutwords[i]]=='#FFA500')){
								   		 //类别 131 cogmech 分析
									   		count[2]=count[2]+1
									  }
								      else if((wordMap[cutwords[i]]=='#00FF00')){
								   		 //类别 140 percept 描述
									   		count[3]=count[3]+1
									  }else if((wordMap[cutwords[i]]=='#FF00FF')){
								   		 //类别 250 relativ 评价
									   		count[4]=count[4]+1
									   }
								   							   	 
								    }//字数统计完成
								
								    var validCount=count[0]+count[1]+count[2]+count[3]+count[4]

									//填充总字数
								    document.getElementById('fontCount').innerHTML = '<div class="alert alert-info" role="alert">有效词数为:'+validCount+'</div>';
								for(var m=0;m<count.length;m++){
										percent[m] = ((count[m]/validCount)*100).toFixed(2)
								    }	  
								   
									//分析比例
									
				var ul = document.getElementById("ulc")
				ul.style.display="block"
				var lis = ul.children
				lis[0].innerHTML = '结果：'+'<span style="color:'+colorMap[1]+'">'+colorMap[1]+'</span>'+','+'数量为:'+count[0]+','+'占比为:'+percent[0]+'%'
				lis[1].innerHTML = '情感：'+'<span style="color:'+colorMap[125]+'">'+colorMap[125]+'</span>'+','+'数量为:'+count[1]+','+'占比为:'+percent[1]+'%'
				lis[2].innerHTML = '分析：'+'<span style="color:'+colorMap[131]+'">'+colorMap[131]+'</span>'+','+'数量为:'+count[2]+','+'占比为:'+percent[2]+'%'
				lis[3].innerHTML = '描述：'+'<span style="color:'+colorMap[140]+'">'+colorMap[140]+'</span>'+','+'数量为:'+count[3]+','+'占比为:'+percent[3]+'%'
				lis[4].innerHTML = '评价：'+'<span style="color:'+colorMap[250]+'">'+colorMap[250]+'</span>'+','+'数量为:'+count[4]+','+'占比为:'+percent[4]+'%'
	
									var dataper = [percent[0],percent[1],percent[2],percent[3],percent[4]];
							          var xinforma = ['结果','情感','分析','描述','评价'];
							 
							          // 获取上下文
							          var ptextAye = document.getElementById('ptextAye');
							          option = {
							        		    color: ['#3398DB'],
							        		    tooltip : {
							        		        trigger: 'axis',
							        		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
							        		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
							        		        }
							        		    },
							        		    grid: {
							        		        left: '3%',
							        		        right: '4%',
							        		        bottom: '3%',
							        		        containLabel: true
							        		    },
							        		    xAxis : [
							        		        {
							        		            type : 'category',
							        		            data : xinforma,
							        		            axisTick: {
							        		                alignWithLabel: true
							        		            }
							        		        }
							        		    ],
							        		    yAxis : [
							        		        {
							        		            type : 'value'
							        		        }
							        		    ],
							        		    series : [
							        		        {
							        		            name:'数量',
							        		            type:'bar',
							        		            barWidth: '60%',
							        		            data:count
							        		        }
							        		    ]
							        		};

							      		  				var myChart = echarts.init(ptextAye);
							      		  				myChart.setOption(option);
			//2 个人反馈分析
			var ptfbk=fbkData.ptfbk//个人文本分析反馈建议
			   for(var i=0;i<xinforma.length;i++){
					 for(var j=0;j<ptfbk.length;j++){
					   if(xinforma[i]==ptfbk[j].name){//可以判断当前属性 是否大于20
					    var explain=ptfbk[j].explain
					    var fd=ptfbk[j].fbk
					    var fdk=fd.split('%')
						if(percent[i]>=20){
						//$('#ctPa').append('<span style="font-size:20px;font-weight:bold;color:green;">'+xinforma[i]+':</span>'+':<span style="font-size:17px;font-weight:bold;color:black;">'+explain+'</span><br><span style="font-size:15px;font-weight:bold;color:black;">反馈:</span> <span style="font-size:18px;color:black;">'+fdk[0]+'</span><br>');						
						$('#ctPa').append('<div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">'+xinforma[i]+':'+explain+'</h3></div><div class="panel-body">反馈:'+fdk[0]+'</div></div>')
						}else{
						//$('#ctPa').append('<span style="font-size:20px;font-weight:bold;color:red;">'+xinforma[i]+':</span>'+':<span style="font-size:17px;font-weight:bold;color:black;">'+explain+'</span><br><span style="font-size:15px;font-weight:bold;color:black;">反馈:</span> <span style="font-size:18px;color:black;">'+fdk[1]+'</span><br>');			
						$('#ctPa').append('<div class="panel panel-danger"><div class="panel-heading"><h3 class="panel-title">'+xinforma[i]+':'+explain+'</h3></div><div class="panel-body">反馈:'+fdk[1]+'</div></div>')
						}
					}
					 }
			   }
		
			//3 小组比较
			var countGp = new Array()
		    var percentGp = new Array()
		    var everyWordsGp=''
		    var cutwordsGp=''	
		    var nameGp=''
		    for (var uName in data.userText){
				    	if (uName!=me.realname){// 找搭档 名字，和他的全部文章
				    		everyWordsGp=data.userText[uName]
				    		nameGp=uName
				    		break;
				    	}
			}
			for (var i=0;i<data.cutTexts.length;i++){//找到搭档 的分词文章
		    	 var temp=data.cutTexts[i]
		    	 for (var uName in temp){
				    	if (uName==nameGp){
				    		cutwordsGp=temp[uName]
				    	}
				    }
		    }
			cutwordsGp=String(cutwordsGp).split(',')
			for(var i=0;i<5;i++){
				countGp[i]=0   
			}
			for (var i=0;i<cutwordsGp.length;i++){
			      if(wordMap[cutwordsGp[i]]=='#FF0000'){
			   		 //类别 1 funt  结果
			   		 countGp[0]=countGp[0]+1
			   	 }else if((wordMap[cutwordsGp[i]]=='#0000FF')){
			   		 //类别 125 affect 情感
			   		countGp[1]=countGp[1]+1
			   	 }else if((wordMap[cutwordsGp[i]]=='#FFA500')){
			   		 //类别 131 cogmech 分析
				   		countGp[2]=countGp[2]+1
				  }
			      else if((wordMap[cutwordsGp[i]]=='#00FF00')){
			   		 //类别 140 percept 描述
				   		countGp[3]=countGp[3]+1
				  }else if((wordMap[cutwordsGp[i]]=='#FF00FF')){
			   		 //类别 250 relativ 评价
				   		countGp[4]=countGp[4]+1
				   }
			   							   	 
			    }//字数统计完成
			   var validCountGp=countGp[0]+countGp[1]+countGp[2]+countGp[3]+countGp[4]
				//填充总字数
			   //document.getElementById('fontCountGp').innerHTML ='<span style="font-size:16px;font-weight:bold;color:black;">'+me.realname+'</span> 同学有效词数为：<span style="font-size:16px;font-weight:bold;">'+validCount+'</span><br>'+'<span style="font-size:16px;font-weight:bold;color:black;">'+nameGp+'</span> 同学有效词数为：<span style="font-size:16px;font-weight:bold;">'+validCountGp+'</span><br>'
			   $('#fontCountGp').append('<div class="alert alert-info" role="alert">'+me.realname+'同学有效词数为:'+validCount+'<br>'+nameGp+'同学有效词数为:'+validCountGp+'</div>');
			  // $('#fontCountGp').append('<div class="alert alert-info" role="alert">'+nameGp+'同学有效词数为:'+validCountGp+'</div>');
			   for(var m=0;m<count.length;m++){
				   percentGp[m] = ((countGp[m]/validCountGp)*100).toFixed(2)
			   }	  
			   //产生两个人对比柱状图
			   var gtextAye = document.getElementById('gtextAye');
			   //var dataSouce=[]//柱状图数据源
			   var names=[]
			   names.push(me.realname)
			   names.push(nameGp)
			   //dataSouce.push(names)//填充 名称标签
			
			   //nameGp=nameGp.replace(/[\r\n]/g,"")
			  /*   for(var i=0;i<xinforma.length;i++){
				  var temp=[]//封装两个人    某个纬度的数据
				  temp.push(xinforma[i])//纬度名称
				  temp.push(count[i])//自己的 纬度数据
				  temp.push(countGp[i])	//同伴的
				  dataSouce.push(temp)
			   } 
			   console.log(dataSouce) */
			     var option = {
            title: {
                text: '对比图'
            },
            tooltip: {},
            legend: {
                data:names
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            magicType: {show: true,type: ['line', 'bar']},  
            calculable: true,  
            xAxis: {
            	interval:0,
            	type :'category',
                data:xinforma
            },
            yAxis: {},
            series: [{
                name:names[0],//去空格
                type: 'bar',
                data:count
            },
            {
            	name:names[1],
                type: 'bar',
                data:countGp
          	
          },]
        };
				var myChart2 = echarts.init(gtextAye);
	  				myChart2.setOption(option);
			//产生对比图结束，开始文字建议
			var   gtfbk=fbkData.gtfbk
			//$('#ctGa').append('<span style="font-size:15px;font-weight:bold;color:black;">'+me.realname+':</span>同学,下面是你和<span style="font-size:15px;font-weight:bold;color:black;">'+nameGp+'</span> 同学的文本分析对比反馈，快去看看你和小伙伴的表现数据对比吧！<br>');
			
			$('#ctGa').append('<div class="alert alert-warning" role="alert">'+me.realname+'同学,下面是你和'+nameGp+'同学的文本分析对比反馈,快去看看你和小伙伴的表现数据对比吧!</div>');
			
			for(var i=0;i<count.length;i++){
				var explainGp=gtfbk[i].explain
				var gdk=gtfbk[i].gbk.split('%')
				if(count[i]>=countGp[i]){
			     // $('#ctGa').append('<span style="font-size:20px;font-weight:bold;color:green;">'+xinforma[i]+':</span><span style="font-size:15px;font-weight:bold;color:black;">反馈:</span><span style="font-size:18px;color:black;">恭喜你，该反思<span style="font-size:18px;color:black;">'+gdk[0]+'</span><span style="font-size:18px;color:black;">别忘了要多多帮助你的同伴，共同进步哦。</span><br>');						
			  	$('#ctGa').append('<div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">'+xinforma[i]+':</h3></div><div class="panel-body">反馈:恭喜你，该反思'+gdk[0]+'别忘了要多多帮助你的同伴，共同进步哦。</div></div>')
				
				}else{
				$('#ctGa').append('<div class="panel panel-danger"><div class="panel-heading"><h3 class="panel-title">'+xinforma[i]+':</h3></div><div class="panel-body">反馈:很遗憾，该反思'+gdk[1]+'如果遇到什么问题希望你能及时与老师和同学交流学习，希望你能取得进步。加油哦！</div></div>')
				 //$('#ctGa').append('<span style="font-size:20px;font-weight:bold;color:red;">'+xinforma[i]+':</span><span style="font-size:15px;font-weight:bold;color:black;">反馈:</span><span style="font-size:18px;color:black;">很遗憾，该反思<span style="font-size:18px;color:black;">'+gdk[1]+'</span><span style="font-size:18px;color:black;">如果遇到什么问题希望你能及时与老师和同学交流学习，希望你能取得进步。加油哦！</span><br>');										
				}
			}
							      		  				
							      		  				
							}
						});

	function textReport(){
		
		
		$('#pa').removeClass('active');
		$('#ga').removeClass('active');
		$('#tp').addClass('active');
		$('#ctBegin').show();
		$('#ctPa').hide();
		$('#ctGa').hide();
	
	 }
	
	
	function petextAye(){
		$('#tp').removeClass('active');
		$('#ga').removeClass('active');
		$('#pa').addClass('active');
		$('#ctBegin').hide();
		$('#ctGa').hide();
		$('#ctPa').show();
		
		
	 }
    
    function gptextAye(){
    	$('#tp').removeClass('active');
		$('#pa').removeClass('active');
		$('#ga').addClass('active');
		$('#ctBegin').hide();
		$('#ctPa').hide();
		$('#ctGa').show();
		
	 }
	
	
	
	
	function ret(){
 		 var assignment_Id;
 		 var activity_Id;
  	     assignment_Id=getQueryString('assignmentId')
  	     activity_Id=getQueryString('activityId')
  	     window.location.href="/pad/edit.html?assignmentId="+assignment_Id+"&activityId="+activity_Id
 	 }
 	   
	 function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			var groupid;
			if (r != null)
				return unescape(r[2]);
			return null;
		}
	</script>
	</body>
</html>
